<template>
  <div class="online-video">
    <div class="online-video-list">
      <div class="left-menu">
        <ul>
          <li
            :class="['menu', activeMenu == index ? 'active-menu' : '']"
            v-for="(item, index) in menuList"
            :key="index"
            @click="handleMenu(index)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="right-video" v-if="videoList.length > 0">
        <div
          class="content"
          v-for="(item, index) in videoList"
          :key="index"
          @click="goDesc(item)"
        >
          <div class="image">
            <el-image
              fit="cover"
              :src="item.title_page || require('../../static/artShop/basis/art-shop.png')"
              alt=""
            />
          </div>
          <div class="title">
            {{ item.name }}
          </div>
        </div>
      </div>
      <el-empty style="margin: 0 auto;background-color: #fff;" v-else description="暂无数据"></el-empty>
    </div>
    <Pagin
      ref="page"
      v-show="videoList.length > 0"
      :func="getDataList"
      :pagesSizes="[10, 20, 30, 50]"
      :sizeNum="10"
      :layout="'prev, pager, next'"
      background
      :position="'center'"
      class="pagin"
    ></Pagin>
  </div>
</template>

<script>
import Pagin from "@/components/pagin.vue";
import { getToken } from "@/utils/auth";
import { getImgUrl } from "@/utils/downloadFile";
export default {
  name: "",
  components: {
    Pagin,
  },
  props: {},
  data() {
    return {
      videoList: [],
      menuList: [
        {
          active: 1,
          name: "3D模型展厅",
        },
        {
          active: 2,
          name: "360VR展厅",
        },
        {
          active: 3,
          name: "精品展厅",
        },
        {
          active: 4,
          name: "艺术展厅",
        },
      ],
      getImgUrl,
      activeMenu: 0,
      apiMap: { 0: "threeModle", 1: "vrstadiums", 2: "boutique", 3: "artShopList" },
    };
  },
  asyncData({ $api }) {},
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.refresh();
  },
  methods: {
    handleMenu(index) {
      this.activeMenu = index;
      this.refresh();
    },
    refresh() {
      this.$refs.page.refresh();
    },
    getDataList(page, page_size, callback) {
      let params = {
        page_num: page,
        page_count: page_size,
      };
      // return false
      // const api =
      // 这里要写接口然后把数据和total丢进去
        this.$api[this.apiMap[this.activeMenu]]({ ...params }).then((res) => {
        if (res.status == "$SUCCESS") {
          this.videoList = res.result.item_list;
          callback(this.videoList, res.result.total_count);
        }
      });
    },
    // 进入详情页
    goDesc(data) {
      if (!getToken()) return this.$message.warning('请您先登陆才可以查看展厅详情')
      if (this.activeMenu === 0 || this.activeMenu === 1) {
        this.$router.push({
          path: "/artShop/showRoom",
          query: { data_id: data.data_id, type: this.apiMap[this.activeMenu] },
        });
      } else {
        this.$router.push({
          path: `/artShop/${this.activeMenu === 2 ? 'showHall' : 'artHall'}`,
          query: {
            data_id: data.data_id
          }
        })
      }
    },
  },
};
</script>

<style scoped lang="less">
.online-video {
  padding: 60px 276px;

  .online-video-list {
    display: flex;
    margin-bottom: 20px;

    .left-menu {
      line-height: 23px;
      font-size: 24px;
      font-weight: bold;
      color: #898989;
      // margin-right: 107px;
      display: inline-block;

      .menu {
        margin-bottom: 35px;
        // float: left;
        width: 180px;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        cursor: pointer;

        &.active-menu {
          color: #000;
        }
      }
    }

    .right-video {
      display: inline-block;
      // justify-content: space-between;
      // flex-wrap: wrap;

      .content {
        width: 344px;
        margin-bottom: 60px;
        display: inline-block;
        margin-right: 60px;
        cursor: pointer;

        &:nth-child(3n) {
          margin-right: 0;
        }

        .image {
          width: 344px;
          height: 458px;
          position: relative;

          ::v-deep(.el-image) {
            width: 344px;
            height: 458px;
          }
        }

        .title {
          line-height: 17px;
          font-size: 16px;
          font-weight: 600;
          color: #000;
          margin: 16px 0 12px;
        }

        .address,
        .data {
          font-size: 16px;
          font-family: Source Han Serif SC;
          font-weight: bold;
          color: #999;
        }
      }
    }
  }
}
</style>
